<template>
    <div class="user-avator-dropdown">
        <span v-text="username" style="color:#8c0776; padding-right:5px;font-size:18px"></span>
        <Dropdown @on-click="handleClick">
            <Avatar :src="userAvator"/>
            <Icon :size="18" type="md-arrow-dropdown"></Icon>
            <DropdownMenu slot="list">
                <DropdownItem :size="38" name="home">
                    <Icon type="md-contact"/>
                    修改信息
                </DropdownItem>
                <DropdownItem :size="38" name="logout" divided>
                    <Icon type="md-exit"/>
                    退出登录
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="'修改'" width="900">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="姓名" prop="name">
                    <Input v-model="modal.name" placeholder="姓名" size="large" required="true"></Input>
                </FormItem>
                <FormItem label="登录账号/电话" prop="phone">
                    <Input v-model="modal.phone" placeholder="登录账号/电话"></Input>
                </FormItem>
                <FormItem label="登录密码" prop="password">
                    <Input type="password" v-model="modal.password" placeholder="登录密码" size="large"
                           required="true"></Input>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {getUserInfo} from "@/api/user";
    import "./user.less";
    import {mapActions} from "vuex";

    //校验规则
    const rules = {
        name: [
            {
                required: true,
                message: "姓名不能为空",
                trigger: "blur"
            }
        ],
        password: [
            {required: true, message: "密码不能为空", trigger: "blur"},
            {min: 6, message: "最少6位密码"}
        ],
        phone: [
            {
                required: true,
                message: "登录账号或电话不能为空",
                trigger: "blur"
            }
        ]
    };
    //打开页面
    let handleAdd = function () {
        this.modal = {};
        let url = "/api/user/openPersonal";
        let params = {};
        this.postRequest(url).then(res => {
            if (res.code == 20000) {
                this.modal = res.data;
                this.modal.password = null;
                this.formVisible = true;
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //保存
    let save = function () {
        if (this.modal.deptId == undefined) {
            this.$Message.error("请选择部门");
            this.formLoading = false;
        } else {
            this.postRequest("/api/user/updateUserInfo", this.modal).then(res => {
                if (res.code == 20000) {
                    this.formLoading = false;
                    this.formVisible = false;
                    this.$Message.success("保存成功");
                } else {
                    this.formLoading = false;
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        }
    };
    //保存
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.save();
            }
        });
    };

    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.formVisible = false;
    };
    export default {
        data() {
            return {
                username: "Test",
                formVisible: false,
                //表单提交状态
                formLoading: false,
                modal: {},
                //查询条件
                filter: {},
                //验证规则
                rule: rules,
            };
        },
        name: "User",
        props: {
            userAvator: {
                type: String,
                default: ""
            }
        },
        created: function () {
            this.username = this.$store.state.user.userName;
        },
        methods: {
            handleAdd,
            handleSubmit,
            onCancel,
            save,
            ...mapActions(["handleLogOut"]),
            handleClick(name) {
                switch (name) {
                    case "logout":
                        this.handleLogOut().then(() => {
                            this.$router.push({
                                name: "login"
                            });
                        });
                        break;
                    case "home":
                        this.handleAdd();
                        //this.$router.push({path:'/person'});
                        break;
                }
            }
        }
    };
</script>
